<template>
  <view>
    <view class="flex  bg-white">
      <view class="flex flex-3 bg-white " style="height: 80rpx;">
        <block v-for="(item,index) in list" :key="index">
          <view class="flex flex-1 align-center justify-center">
            <text class="font" :style="{ color: current == index ? 'var(--mainColor)':'' }"
              @click="tabClick(index, item.sort)">{{item.name}}</text>
            <view class="sort" v-if="index == 2">
              <view class="sort-up" :class="{'active-up': current == index && activesSort == 1}"></view>
              <view class="sort-down" :class="{'active-down': current == index && activesSort == 2}"></view>
            </view>
          </view>
        </block>
      </view>
      <view class="flex flex-1 align-center justify-center" v-if="right">
        <view class="flex align-center justify-center" style="line-height: 80rpx;" @click="show = true">
          <text class="u-m-r-8 font">筛选</text>
          <u-icon name="/static/index/sx.png" size="18"></u-icon>
        </view>
      </view>
    </view>
		<u-popup v-model="show" mode="right" width="70%">
			<view class="u-p-x-20">
				<!-- #ifdef H5 -->
				<view class="status_bar" style="height: 44px;"></view>
				<!-- #endif -->
				<view class="flex flex-column">
					<text class="u-p-y-20">价格区间</text>
					<view class="flex align-center" style="width: 100%;">
						<view class="flex-1" >
							<u-input v-model="min_price" type="number" inputAlign="center" height="50" placeholder="最低价" :customStyle="customStyle" placeholderStyle="{fontSize: '16rpx'}"></u-input>
						</view>
						<view class="u-p-x-10" style="width: 80rpx;">
							<u-gap height="8" bg-color="#bbb"></u-gap>
						</view>
						<view class="flex-1">
							<u-input v-model="max_price" type="number" inputAlign="center" height="50" placeholder="最高价" :customStyle="customStyle" placeholderStyle="{fontSize: '16rpx'}"></u-input>
						</view>
					</view>
				</view>
				<view class="position-fixed bottom-0 left-0 right-0 safe-bottom">
					<view class="flex align-center justify-between u-p-x-50 u-p-b-30">
						<dy-button backgroundColor="#fff" :borderColor="'var(--mainColor)'" :color="'var(--mainColor)'" width="150rpx" @click="show = false">关闭</dy-button>
						<dy-button :borderColor="'var(--mainColor)'" width="150rpx"@click="sure">确认</dy-button>
					</view>
				</view>
			</view>
		</u-popup>
  </view>
</template>

<script>
  export default {
    name: "dy-tabs",
    props: {
			right: {
				type: Boolean,
				default: true
			},
      list: {
        type: Array,
        default: []
      } 
    },
    data() {
      return {
				show: false,
        current: 0,
        activesSort: 1,
				customStyle: {
					background: '#eeeeee',
					'border-radius': '30rpx',
					width: "120rpx",
				},
				min_price: '',
				max_price: ''
      };
    },
    methods: {
      tabClick(index, sort) {
				console.log(89898, sort);
				if(this.current == index && index != 2) return
				this.activesSort = this.activesSort == 1? 2:1
        this.current = index
				this.$emit('click', index)
      },
			sure() {
				this.$emit('choice', this.min_price, this.max_price)
				this.show = false
			}
    }
  }
</script>

<style lang="scss" scoped>
  .sort {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 16rpx;
    line-height: 16rpx;
    margin-left: 10rpx;
    vertical-align: middle;
  }

  .sort-up {
    border: 8rpx solid transparent;
    border-bottom: 8rpx solid #333333;
  }

  .active-up {
    border-bottom: 8rpx solid var(--mainColor);
  }

  .sort-down {
    margin-top: 5rpx;
    border: 8rpx solid transparent;
    border-top: 8rpx solid #333333;
  }

  .active-down {
    border-top: 8rpx solid var(--mainColor);
  }
</style>
